<template>
    <div>
        <el-card>
            <CategorySelect @changeCategory="changeCategory" :isShowList="isShowList"/>
        </el-card>
        <el-card style="margin-top:20px">
            <!-- 这个是列表页 -->
            <div v-show="isShowList"> 
                <el-button type="primary" icon="el-icon-plus" @click="showAddDiv" :disabled="!category3Id">添加属性</el-button>
            <!-- :data="data" -->
            <el-table
                :data="attrList"
                border
                style="width: 100%">
                <el-table-column
                    align="center"
                    type="index"
                    label="序号"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="attrName"
                    label="属性名称"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="prop"
                    label="属性值列表"
                    width="width">
                    <template slot-scope="{row,$index}">
                        <el-tag type="success" v-for="(attrValue,index) in row.attrValueList" :key="attrValue.id">
                            {{attrValue.valueName}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="prop"
                    label="操作"
                    width="150">
                    <template slot-scope="{row,$index}">
                        <HintButton type="warning" icon="el-icon-edit" title="修改" @click="showUpdateDiv(row)"></HintButton>
                        <el-popconfirm :title="`你确定删除${row.attrName}吗？`" @onConfirm="deleteAttr(row)">
                            <HintButton slot="reference" type="danger" title="删除" icon="el-icon-delete"></HintButton>
                        </el-popconfirm>  
                    </template>
                </el-table-column>
            </el-table>
            </div>
            <!-- 添加修改的页面 -->
            <div v-show="!isShowList">
                <el-form :inline="true"  label-width="80px" :model="attrForm">
                    <el-form-item label="属性名">
                        <el-input placeholder="请输入属性名" v-model="attrForm.attrName"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" icon="el-icon-plus" @click="addAttrValue" :disabled="!attrForm.attrName">添加属性值</el-button>
                <el-button @click="isShowList=true">取消</el-button>
                <el-table
                    :data="attrForm.attrValueList"
                    border
                    style="width: 100%;margin:20px 0;">
                    <el-table-column
                        align="center"
                        type="index"
                        label="序号"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="prop"
                        label="属性值名称"
                        width="width">
                        <template slot-scope="{row,$index}">
                            <el-input 
                                :ref="$index"
                                v-if="row.isEdit" 
                                v-model="row.valueName" 
                                placeholder="请输入属性值" 
                                @blur="toLook(row)" 
                                @keyup.enter.native="toLook(row)"
                                size="mini"
                            ></el-input>
                            <span style="display:block;width:100%" v-else @click="toEdit(row,$index)">{{row.valueName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="prop"
                        label="操作"
                        width="width">
                        <template slot-scope="{row,$index}">
                            <el-popconfirm :title="`你确定删除${row.valueName}吗？`" @onConfirm="attrForm.attrValueList.splice($index,1)">
                                <HintButton slot="reference" type="danger" title="删除" icon="el-icon-delete"></HintButton>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" :disabled="attrForm.attrValueList.length===0" @click="save">保存</el-button>
                <el-button @click="isShowList=true">取消</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
export default {
    name: 'Attr',
    data(){
        return{
            category1Id:'',
            category2Id:'',
            category3Id:'',
            attrList:[],
            isShowList:true,
            attrForm:{
                attrName:"",
                attrValueList:[
                ],
                categoryId:'',
                categoryLevel:3
            }
        }
    },
    methods:{
        changeCategory({categoryId,level}){
            if(level === 1) {
                this.category2Id =''
                this.category3Id=''
                this.attrList=[]
                this.category1Id = categoryId
            }else if(level === 2) {
                this.category3Id=''
                this.attrList=[]
                this.category2Id = categoryId
            }else {
                this.category3Id = categoryId
                this.getAttrList()
            }
        },
        async getAttrList(){
            let {category1Id,category2Id,category3Id} = this
            const result = await this.$API.attr.getList(category1Id,category2Id,category3Id)
            if(result.code === 200 || result.code === 20000){
                this.attrList = result.data
            }
        },
        showAddDiv(){
            this.isShowList=false
            this.attrForm ={
                attrName:'',
                attrValueList:[],
                categoryLevel:3,
                categoryId:this.category3Id
            }
        },
        //添加属性值时改为span标签 在push内不添加一个标签
        addAttrValue(){
            this.attrForm.attrValueList.push({
                attrId:this.attrForm.id,
                // id:0,
                valueName:'',
                isEdit:true //属性控制span还是input
            })
            //自动获取焦点最后一个获取焦点
            this.$nextTick(()=>{
                this.$refs[this.attrForm.attrValueList.length-1].focus()
            })
        },
        //修改已有属性 列表页
        showUpdateDiv(row) {
            this.isShowList =false
            // this.attrForm = {...row}
            this.attrForm = cloneDeep(row)
            //修改的属性每一项isEdit:false 对象使用数据劫持的所以不能直接修改
            this.attrForm.attrValueList.forEach(item=>this.$set(item,'isEdit',false))
        },
        //点击span从查看模式变为编辑模式
        toEdit(row,index){
                row.isEdit = true
                this.$nextTick(()=>{
                    this.$refs[index].focus()
                })
        },
        toLook(row) {
            let attrValueName = row.valueName
            if(attrValueName.trim() === ''){
                row.valueName=''
                return 
            }
            let isRepeat = this.attrForm.attrValueList.some(item=>{
                if(item !== row){ //除去自身
                    return item.valueName === attrValueName
                }
            })
            if(isRepeat){
                this.$message.info('属性名不能重复')
                row.valueName=''
                return
            }
            row.isEdit=false
        },
        //点击保存
        async save(){
            let attr = this.attrForm
            attr.attrValueList = attr.attrValueList.filter(item=>{
                if(item.valueName !== ''){
                    delete item.isEdit
                    return true
                }
            })
            if(attr.attrValueList.length===0){
                this.$message.info('属性值必须存在')
                return
            }
            try {
                const result = await this.$API.attr.addOrUpdate(attr)
                if(result.code === 200 || result.code === 20000){
                    this.$message.success('保存属性成功')
                    //重新获取列表页数据
                    this.getAttrList()
                     //回到列表页
                    this.isShowList=true
                }else {
                    this.$message.error('请求保存属性失败')
                }
            } catch (error) {
                this.$message.error('请求失败')
            }
            
        },
        //点击删除
        async deleteAttr(row) {
            try {
                const result = await this.$API.attr.delete(row.id)
                if(result.code === 200 || result.code === 20000){
                    this.$message.success('删除属性成功')
                    this.getAttrList()
                }else{
                    this.message.error('删除属性失败')
                }
            } catch (error) {
                this.message.error('删除属性请求失败')
            }
            
        }
    }
}
</script>

<style lang="scss" scoped>

</style>